<template>
  <div class="form-container">
    <table-tools>
      <template #left>
        <el-form
          :inline="true"
          :model="filterData"
          label-position="right"
          size="small"
          class="filter-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item
                label="审批流程类型"
                style="margin-top: 18px"
              >
                <el-select
                  v-model="filterData.productStatus"
                  clearable
                  style="width: 100%"
                  placeholder="请选择审批流程类型"
                  @change="listSearch"
                >
                  <el-option
                    v-for="(item, idx) in dictMap?.product_status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="发起人"
                style="margin-top: 18px"
              >
                <el-select
                  v-model="filterData.productStatus"
                  clearable
                  style="width: 100%"
                  placeholder="请选择发起人"
                  @change="listSearch"
                >
                  <el-option
                    v-for="(item, idx) in dictMap?.product_status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="时间范围"
                style="margin-top: 18px"
              >
                <el-date-picker
                  v-model="filterData.date"
                  style="width: 100%;"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="抄送时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="关键字"
                style="width: 100%;margin-top: 18px"
              >
                <el-input
                  v-model="filterData.keyWord"
                  clearable
                  placeholder="输入流程编号、信息摘要关键字查询"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item style="margin-top: 18px">
                <el-button class="border-btn">重置</el-button>
                <el-button
                  type="primary"
                  class="main-btn danger-btn"
                  @click="listSearch"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button
            class="border-danger"
            size="small"
          >全部已读</el-button>
        </div>
      </template>
    </table-tools>
  </div>
</template>

<script>
export default {
  setup(props, context) {
    return {}
  },
}
</script>

<style>
</style>
